<template>
	<view class="content" :class="isLogin ? 'changeStyle' : ''">
		<view class="win-bar-box" @mousedown="mousedown"></view>
		<view class="return-login" v-if="isLogin > 0">
			<text class="icon-font arrow-f-size" @click="returnLogin">&#xe604;</text>
			<text class="tit-txt">{{ returnText }}</text>
		</view>
		<view class="close" @click="shutDown" v-if="showShutDownBtn">
			<image src="../../static/images/close.png" mode="aspectFill"></image>
		</view>
		<view class="login-box" v-if="isLogin == 0" :animation="animationData">
			<image class="logo-img" src="../../static/images/logo.png" mode="aspectFill"></image>
			<view class="login-title">艾蜜云</view>
			<view class="login-policy">引领企业转型 赢在科技共享</view>
			<view class="login-type-box" v-if="false">
				<view class="p-sele" @click="onClickLoginType(1)">
					<view class="icon-box">
						<image class="i-b-img" :src="loginType == 1 ? scanIconArr[1] : scanIconArr[0]"
							mode="aspectFill"></image>
					</view>
					<text class="txt" :class="loginType == 1 ? 'selected' : ''">扫码登录</text>
				</view>
				<view class="p-sele" @click="onClickLoginType(0)">
					<view class="icon-box">
						<image class="i-b-img" :src="loginType == 0 ? phoneIconArr[1] : phoneIconArr[0]"></image>
					</view>
					<text class="txt" :class="loginType == 0 ? 'selected' : ''">手机号登录</text>
				</view>
			</view>
			<view class="login-phone-box" v-if="loginType == 0">
				<view class="ipt-phone-box">
					<input class="ipt-phone" @input="changePhone" type="number" maxlength="11" :value="phone"
						placeholder="请输入手机号" @mousewheel.native.prevent />
				</view>
				<view class="ipt-yzm-box">
					<input class="ipt-yzm" type="text" @input="changeVcode" @keydown.enter="login" :value="v_code"
						placeholder="请输入4位数校验码" ref="ckCodeInput" @mousewheel.native.prevent maxlength="4" />
					<view class="get-yzm" style="background: #f5f5f5;border: 1px solid #ccc;border-left: none;"
						@click="getMakecode">
						<image style="height: 50px;width: 100px;" :src="makecodeUrl"></image>
					</view>
				</view>
				<view class="ipt-yzm-box">
					<input class="ipt-yzm" type="number" @input="changeYzm" @keydown.enter="login" :value="ckCode"
						placeholder="请输入验证码" ref="ckCodeInput" @mousewheel.native.prevent />
					<view class="get-yzm" :class="reSendTime != 120 ? 'comm-dis' : ''" @click="getCkCode">{{ reSendTime
						!= 120 ? reSendTime + "秒后可以重发" : "获取验证码" }}</view>
				</view>
				<view class="login-btn-box">
					<view class="login-btn" @click="login">登录</view>
				</view>
				<view class="a-link">
					<text @click="linkFun(0)">立即下载注册</text>
					<text @click="linkFun(1)">官方小程序</text>
				</view>
				<view class="on-trial-view" @click="goHrea('https://www.imiyun.com/logn')">立即申请试用</view>
			</view>
			<view class="login-scan-box" v-else>
				<view class="tip-txt">请用以下APP扫下方二维码登录，扫码后在手机上点击“确认授权”即可</view>
				<view class="login-app-box">
					<view class="a-icon-box">
						<image src="../../static/images/imiyun.png"></image>
					</view>
					<view class="a-i-txt">艾蜜云</view>
					<view class="a-icon-box">
						<image src="../../static/images/weixin.png"></image>
					</view>
					<view class="a-i-txt">微信</view>
				</view>
				<view class="item-qr-box" id="qrBox">
					<ayQrcode ref="qrcode" qrcode_id="qrcode2" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode"
						:height="wh" :width="wh" themeColor="#000" />
				</view>
			</view>
		</view>
		<view class="change-box comm-list" v-else-if="isLogin == 1" :animation="changeBox"
			style="width: 600px;max-width: 600px;">
			<view class="change-identity" v-for="(item, index) in identityList" :key="index" @click="changeItem(item)">
				<view class="flex1 flex_row">
					<view class="ide-img">
						<image :src="item.logo" mode="aspectFill"></image>
					</view>
					<view class="ide-center">
						<view class="i-c-title">({{ item.type_txt || '未知版本' }}) {{ item.name }}</view>
						<view class="i-c-address mt5">{{ item.district }}-{{ item.address }}</view>
						<view class="i-c-address mt5">
							<span>到期时间：{{ item.endtime_txt }}</span>
							<span class="ml20">状态：{{ item.status_txt }}</span>
						</view>
					</view>
				</view>
				<view class="">
					<view class="flex_row">
						<view class="">进入</view>
						<view class="icon-right icon-font">&#xe600;</view>
					</view>
					<view class="mt10">
						<el-tag size="mini" @click.stop="changeXFHandle(item)"> {{ item.act_ls && item.act_ls[0].name }} </el-tag>
					</view>
				</view>
			</view>
		</view>
		<view class="enter-company" v-else :animation="enterCP">
			<view class="company-info">
				<view class="cp-info">
					<view class="ide-img">
						<image :src="companyInfo.cpInfo.logo" mode="aspectFill"></image>
					</view>
					<view class="ide-center">
						<view class="i-c-title">{{ companyInfo.cpInfo.name }}</view>
						<view class="i-c-address">{{ companyInfo.cpInfo.district }}-{{ companyInfo.cpInfo.address }}
						</view>
					</view>
				</view>
				<view class="boos-info">
					<view class="ide-img">
						<image :src="companyInfo.userInfo.avatar" mode="widthFix"></image>
					</view>
					<view class="ide-center">
						<view class="i-c-title">{{ companyInfo.userInfo.uname }}</view>
						<view class="i-c-address">{{ companyInfo.userInfo.cellphone }}</view>
					</view>
				</view>
			</view>
			<view class="btn-go-cp" @click="goCompany">进入企业</view>
		</view>
		<el-dialog title="艾蜜云官方小程序" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
			<view class="dialogVisible-view">
				<image src="https://cdn.imiyun.com/static/vip/images/imyd.jpg" mode="widthFix"></image>
				<view class="dialogVisible-bottom">微信扫一扫进入小程序</view>
			</view>
		</el-dialog>
		<changeVersionDialog ref="changeVersionRef"></changeVersionDialog>
		<renewVersionDialog ref="renewVersionRef"></renewVersionDialog>
	</view>
</template>

<script>
import ayQrcode from "../../components/comm/ay-qrcode/ay-qrcode.vue";
import config from "../../js/conf/Config.js";
import animation from "../../js/Animation.js";
import cmd from "../../js/Cmd.js";
import goPage from "../../js/GoPage.js";
import lang from "../../js/conf/Lang.js";

import util from "../../js/util/Util.js";
import localStore from "../../js/LocalStore.js";

import limit from "../../js/limit/AccessCtrl.js";

import regionCtrl from "../../js/region/RegionCtrl.js";

import printCtrl from "../../js/print/PrintCtrl.js";

import downloadFile from "../../js/upload/DownloadFile.js";

let debug = config.debug;
let AUTH_MAKECODE_URL = config.AUTH_MAKECODE;
import changeVersionDialog from "@/pages/login/changeVersionDialog.vue";
import renewVersionDialog from "@/pages/login/renewVersionDialog.vue";

export default {
	components: { ayQrcode,changeVersionDialog,renewVersionDialog },
	data() {
		return {
			phone: "",
			ckCode: "",
			v_code: '',
			makecodeUrl: '',
			returnText: "选择工作身份",
			identityList: [],
			companyInfo: {
				cpInfo: {},
				userInfo: {}
			},
			lastStep: false,
			isLogin: 0,

			animationData: {},
			changeBox: {},
			enterCP: {},
			reSendTime: 120,
			setIntervalNum: -1,

			phoneIconArr: ["../../static/images/phone01.png", "../../static/images/phone02.png"],
			scanIconArr: ["../../static/images/scan01.png", "../../static/images/scan02.png"],
			loginType: 0,
			wh: 150,
			modal_qr: false,
			url: '', // 要生成的二维码值
			showShutDownBtn: true,

			dialogVisible: false,
		}
	},

	onLoad() {},

	async onShow() {
		this.$store.commit("setTabBarIds", undefined);
		uni.setLeftWindowStyle({ width: "0px" }); //登录窗口隐藏左边窗口
		let user = await localStore.getUserInfo();
		if (user && user.cellphone) {
			this.phone = user.cellphone;
		}
		this.getMakecode()
	},

	onReady() {
		this.showShutDownBtn = this.showRTBtns;
		let ua = navigator.userAgent.toLowerCase();
		console.log(ua);
		if (this.loginType == 1)
			this.showQrcode();
	},

	methods: {
		handleClose(done) {
			done();
		},

		linkFun(type) {
			// type 0=立即下载注册  1=官方小程序
			if (type) {
				this.dialogVisible = true;
			} else {
				this.goHrea('https://www.imiyun.com/d/#download')
			}
		},

		goHrea(url) {
			window.location.href = url;
		},

		// 展示二维码
		showQrcode() {
			let that = this;
			this.modal_qr = true;
			uni.showLoading(
				{
					title: "加载中...",
					mask: true
				});
			setTimeout(function () {
				uni.hideLoading();
				that.$refs.qrcode.crtQrCode();
				// that.isShowQr = true;
			}, 500);
		},

		/****选择登录方式****/
		onClickLoginType(type) {
			this.loginType = type;
			if (type == 1) {
				this.showQrcode();
			}
		},

		/*** 点击关闭按钮 ***/
		shutDown() {
			// lang.exit(callback);
			// function callback(res)
			// {
			// 	if(res && res.confirm)
			// 	{
			//cmd.external(cmd.CMD_EXIT);
			// }
			// }
		},

		/*** 点击返回按钮 需要判断层级 ***/
		returnLogin() {
			this.isLogin--;
			if (this.isLogin == 0) {
				this.rotateLogin();
			} else if (this.isLogin == 1) {
				this.rotateChangeBox();
			} else if (this.isLogin == 2) {
				this.rotateEnterCP();
			}
		},

		/*** 输入手机号码 ***/
		changePhone(e) {
			this.phone = e.detail.value;
		},

		/*** 输入验证码 ***/
		changeYzm(e) {
			this.ckCode = e.detail.value;
		},

		// 校验码
		changeVcode(e) {
			this.v_code = e.detail.value;
		},

		/*** 获取验证码  PHCODE_GET ***/
		async getCkCode() {
			if (this.reSendTime != 120) return;
			if (this.phone == '') {
				this.$msg({ title: "请输入手机号码！" })
				return;
			}
			if (this.phone.length != 11) {
				this.$msg({ title: "请输入有效的手机号码！" })
				return;
			}
			if (this.v_code.length != 4) {
				this.$msg({ title: "请输入4位数校验码！" })
				return;
			}
			let url = config.PHCODE_GET;
			let param = {};
			param.cellphone = this.phone;
			param.v_code = this.v_code;
			let res = await this.$api({ url: url, data: param });
			if (!res) {
				this.getMakecode()
				return
			}
			if (res.status == 1) {
				this.reSendTime = 120;
				this.getVirCodeTime();
			} else {
				this.getMakecode()
			}
		},

		// 获取验证码
		async getMakecode() {
			this.makecodeUrl = `${AUTH_MAKECODE_URL}?t=${Date.now()}`
		},

		getVirCodeTime() {
			let that = this;
			this.setIntervalNum = setInterval(function () {
				that.reSendTime--;
				if (that.reSendTime <= 0) {
					that.reSendTime = 120;
					clearInterval(that.setIntervalNum);
				}
			}, 1000);

		},

		/*** 点击登录按钮  LOGIN_DO ***/
		async login() {
			if (this.phone == '') {
				this.$msg({ title: "请输入手机号码！" });
				return;
			}
			if (this.phone.length != 11) {
				this.$msg({ title: "请输入有效的手机号码！" });
				return;
			}
			if (this.ckCode == '') {
				this.$msg({ title: "请输入验证码！" });
				return;
			}
			let param = {};
			param.cellphone = this.phone;
			param.ckcode = this.ckCode;
			let res = await this.$api({ url: config.LOGIN_DO, data: param });
			if (!res) return;
			if (res.status == 1) {
				this.reSendTime = 120;
				clearInterval(this.setIntervalNum);
				if (!res.data) return;
				if (res.data.token) {
					downloadFile.cookies = res.data.token;
					uni.setStorageSync('token', res.data.token);
					console.log("res.data.token==xxx==",res.data.token)
				}
				if (res.data.is_set_now == 0) {
					this.identityList = res.data.my_ls;
					this.isLogin = 1;
					this.returnText = "选择工作身份";
					this.rotateChangeBox();
				} else {
					await this.setCpInfoAnduserInfo(res.data);
					cmd.external(cmd.CMD_LOGIN);
					uni.$emit('reset_tabbar_data');
					// goPage.gotoReLaunch(goPage.GOODS_PAGE);
					goPage.gotoReLaunch(goPage.SETTING_PAGE);
				}
				this.$store.commit("login");

				regionCtrl.getRegion();
			}
		},

		/*** 选择身份  SET_NOW***/
		async changeItem(item) {
			if(item.status != 3){
				this.$msg({ title: `您的企业${item.status_txt}，请${item.act_ls[0]?.name}后再继续使用` });
				return
			}
			let url = config.SET_NOW;
			let param = {};
			param.cpid = item.id;
			let res = await this.$api({ url: url, data: param });
			if (!res) return;
			if (res.status == 1) {
				await this.setCpInfoAnduserInfo(res.data);
				this.goCompany();
				printCtrl.getPrintSize(item.id);
				this.$store.dispatch('getCompsetBaseInfo', { getval: '' });
			}
		},

		// 续费
		changeXFHandle(item){
			if(item.act_ls[0].act == 'extenday'){
				this.$refs.renewVersionRef.open(item);
			}else if(item.act_ls[0].act == 'tov'){
				this.$refs.changeVersionRef.open(item)
			}
		},

		/***设置用户信息和企业信息***/
		async setCpInfoAnduserInfo(data) {
			if (data.cp_info) {
				let cp = util.getObjValue(data.cp_info);
				this.companyInfo.cpInfo = cp;
				let oldCp = await localStore.getCpInfo();

				if (cp.id != oldCp.id)
					localStore.removeGoodsDraft();
				localStore.removeGoodsDraftAll();


				await localStore.setCpInfo(cp);
			}

			if (data.user_info) {
				let uInfo = util.getObjValue(data.user_info);
				this.companyInfo.userInfo = uInfo;
				await localStore.setUserInfo(uInfo);
				this.$store.commit("setUser", uInfo);
			}

			if (data.rights) {
				let ls = data.rights.ls;
				if (ls) {
					limit.setLimit(ls);
					await localStore.saveLimit(ls);
				}
			}
			// this.goCompany();
		},

		/*** 点击进入企业 ***/
		goCompany() {
			cmd.external(cmd.CMD_LOGIN);
			uni.$emit('reset_tabbar_data');
			// goPage.gotoReLaunch(goPage.GOODS_PAGE);
			goPage.gotoReLaunch(goPage.SETTING_PAGE);
		},

		mousedown(event) {
			cmd.external(cmd.CMD_MOVE);
		},

		/*** 登录输入页面动画效果 ***/
		rotateLogin() {
			// var animation = uni.createAnimation({
			// 	duration: 600,
			// 	timingFunction: 'ease-in',
			// })
			// animation.translateX(500).opacity(0).step()
			// this.animationData = animation.export()
			// setTimeout(function() {
			// 	animation.translateX(0).opacity(1).step()
			// 	this.animationData = animation.export()
			// }.bind(this), 600);

			animation.start(this.animation, this.animationData);
		},

		/*** 选择企业的动画效果 ***/
		rotateChangeBox() {
			// var animation = uni.createAnimation({
			// 	duration: 600,
			// 	timingFunction: 'ease-in',
			// })
			// animation.translateX(500).opacity(0).step()
			// this.changeBox = animation.export()
			// setTimeout(function() {
			// 	animation.translateX(0).opacity(1).step()
			// 	this.changeBox = animation.export()
			// }.bind(this), 600)
			animation.start(this.animation, this.changeBox);
		},

		/*** 选择进入企业效果 ***/
		rotateEnterCP() {
			// var animation = uni.createAnimation({
			// 	duration: 600,
			// 	timingFunction: "ease-in",
			// });

			// animation.translateX(500).opacity(0).step()
			// this.enterCP = animation.export()
			// setTimeout(function() {
			// 	animation.translateX(0).opacity(1).step()
			// 	this.enterCP = animation.export()
			// }.bind(this), 600)
			animation.start(this.animation, this.enterCP);
		},
	},
}
</script>
<style lang="scss">
::v-deep.el-dialog__header {
	border-bottom: 1px solid #e5e5e5 !important;
}

.dialogVisible-view {
	width: 100%;
	text-align: center;
	font-size: 14px;

	image {
		width: 100%;
	}
}

.content {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-wrap: wrap;
	overflow: hidden;
	background-color: #f2f2f2;

	.win-bar-box {
		position: fixed;
		top: 0;
		width: 100%;
		height: 110px;
		// background-color: #fff;
	}

	.close {
		position: fixed;
		right: 0px;
		top: 0px;
		width: 16px;
		height: 16px;
		padding: 5px 10px;
		text-align: center;

		image {
			width: 100%;
			height: 100%;
		}

		image:hover {
			width: 100%;
			height: 100%;
		}
	}

	.close:hover {
		background-color: #FF3333;
	}

	.return-login {
		position: fixed;
		left: 10px;
		top: 10px;
		font-size: 16px;
		// width: calc(100% - 20px);
		height: 40px;

		.arrow-f-size {
			font-size: 18px;
			cursor: pointer;
		}

		.tit-txt {
			padding-left: 10px;
		}
	}

	.login-box,
	.change-box,
	.enter-company {
		background-color: #FFF;
		padding-top: 50px;
		width: 90%;
		height: 80%;
		// min-width: 400px;
		max-width: 400px;
		position: absolute;
		text-align: center;

		.logo-img {
			width: 80px;
			height: 80px;
			border-radius: 50%;
		}

		.login-title {
			font-size: 24px;
			color: $uni-color-primary;
		}

		.login-policy {
			font-size: 12px;
			color: #AAAAAA;
			font-weight: 400;
		}

		.ipt-phone-box{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding-bottom: 20px;
		line-height: 40px;

		.ipt-phone {
			text-align: left;
			padding-left: 10px;
			margin-bottom: 10px;
			width: 90%;
			height: 50px;
			border: 1px solid #ccc;
			border-radius: 5px;
			background-color: #fff;
		}
	}

	.ipt-phone-box {
		margin-top: 20px;
	}

	.ipt-yzm-box {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding-bottom: 10px;
		line-height: 40px;

		.ipt-yzm {
			text-align: left;
			padding-left: 10px;
			width: 60%;
			margin-bottom: 10px;
			height: 50px;
			border: 1px solid #ccc;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			background-color: #fff;

			// margin-bottom: 10px;
		}

		.get-yzm {
			font-size: 16px;
			width: 100px;
			height: 50px;
			background: #3388FF;
			color: #FFFFFF;
			text-align: center;
			line-height: 50px;
			border: 1px solid #3388FF;
			border-left: 0;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			cursor: pointer;
			overflow: hidden;
		}

		.get-yzm:hover {
			background: $uni-color-primary;
			color: #FFF;
		}
	}



	.login-btn-box {
		margin-top: 10px;
		width: 100%;
		display: flex;
		justify-content: center;

		.login-btn {
			font-size: 16px;
			padding: 5px;
			width: 90%;
			// height: 40px;
			line-height: 40px;
			text-align: center;
			color: #FFF;
			border-radius: 5px;
			background: #3388FF;
			cursor: pointer;
		}

		.login-btn:hover {
			background: #5990FF;
		}
	}

	.a-link {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 13px 0;
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		color: #3388FF;
		cursor: pointer;
	}

	.on-trial-view {
		font-size: 16px;
		width: 100%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		background: rgba(242, 242, 242, .48);
		position: absolute;
		bottom: 0;
		left: 0;
		cursor: pointer;
	}

	.change-identity,
	.cp-info,
	.boos-info {
		width: 90%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding: 10px;
		border: 1px solid #CCC;
		position: relative;
		border-radius: 6px;
		background-color: #fff;
		cursor: pointer;

		.ide-img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.ide-center {
			flex: 1;
			text-align: left;
			line-height: 20px;
			padding: 0 10px;

			.i-c-title {

				width: 100%;
				font-size: 18px;
				font-weight: bold;
				color: #555;
				overflow: hidden;
				word-break: break- all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.i-c-address {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 15px;
				color: #999;
			}
		}

		.icon-right {
			font-size: 11px;
			position: absolute;
			color: #474747;
			right: 20px;
		}
	}

	.change-identity:hover {
		cursor: pointer;
		// background: rgba(200,200,200,.2);
		background: #F8F8F8;
	}

	.change-identity:not(:first-child) {
		border-top: 0;
	}

	.company-info {
		margin: 0 auto;

		.boos-info {
			border-top: 0;
		}
	}

	.btn-go-cp {
		width: 80%;
		margin: 0 auto;
		padding: 10px;
		margin-top: 20px;
		background: #3388ff;
		color: #FFF;
		font-size: 18px;
		cursor: pointer;
		border-radius: 6px;
	}

	.btn-go-cp:hover {
		background: #5990FF; //$uni-color-primary;
	}

	.login-type-box {
		display: flex;
		padding-top: 20px;
		justify-content: center;
		align-items: center;
		font-size: 13px;

		.p-sele {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;

			.icon-box {
				width: 25px;
				height: 25px;

				.i-b-img {
					width: 100%;
					height: 100%;
				}
			}

			.txt {
				padding-left: 10px;
				color: #999;
			}

			.selected {
				color: #3388ff;
			}
		}
	}

	.login-scan-box {
		// display: flex;
		padding-top: 20px;

		// justify-content: center;
		// align-items: center;
		.tip-txt {
			color: #ccc;
			padding-left: 10px;
			padding-right: 10px;
		}

		.login-app-box,
		.item-qr-box {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.a-icon-box {
			width: 20px;
			height: 20px;
			padding-left: 20px;
			padding-right: 10px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.a-i-txt {
			color: #333;
			padding-right: 20px;
		}

		.item-qr-box {
			padding-top: 10px;
			padding-left: 35px;
		}
	}
}

.login-box {
	box-sizing: border-box;
	margin-top: 0;
	padding: 50px 30px 80px;
	height: auto;
	position: relative;

}
}

.changeStyle {
	background-color: #FFFFFF;
}
</style>